<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="姓名" prop="nickName">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="出生年月">
            <el-date-picker
              v-model="daterangeBirthday"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="工号" prop="workerNo">
            <el-input
              v-model="queryParams.workerNo"
              placeholder="请输入工号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="入职时间">
            <el-date-picker
              v-model="daterangeEntryDate"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="离职时间">
            <el-date-picker
              v-model="daterangeLeaveDate"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="岗位">
            <el-select
              v-model="queryParams.postName"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in postList"
                :key="item.id"
                :label="item.postName"
                :value="item.postName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="岗位" prop="postId">
                <el-input v-model="queryParams.postId" placeholder="请输入岗位" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
          <el-form-item label="是否培训">
            <el-select
              v-model="queryParams.isTrain"
              placeholder="请选择是否有效"
            >
              <el-option label="是" value="1"> </el-option>
              <el-option label="否" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安全教育">
            <el-select
              v-model="queryParams.isSecurityTrain"
              placeholder="请选择是否有效"
            >
              <el-option label="是" value="1"> </el-option>
              <el-option label="否" value="2"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="复审情况" prop="reviewSituation">
            <el-input
              v-model="queryParams.reviewSituation"
              placeholder="请输入复审情况"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              v-hasPermi="['app:employee:query']"
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['app:employee:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="addwork()"
              v-hasPermi="['app:employee:add']"
              >新增工种</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['app:employee:remove']"
              >删除</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <div class="userList">
          <el-card v-for="item in employeeList" :key="item.id" class="cardItem">
            <div class="cardMain">
              <el-image
                style="width: 144px; height: 170px"
                :src="item.photo ? getUserImg(item.photo) : photoImg"
                :preview-src-list="[item.photo ? item.photo : photoImg]"
              >
              </el-image>
              <div class="text">
                <p class="name">{{ item.name }}</p>
                <p>性别:{{ item.sex == 0 ? "男" : "女" }}</p>
                <!-- <p>性别:{{ item.gender == 0 ? '男' : '女' }}</p> -->
                <p class="gangwei">岗位:{{ item.post }}</p>
                <p>部门:{{ item.deptName }}</p>
                <p>入职日期:{{ item.entryDate }}</p>
              </div>
              <div class="top_right">
                <el-button plain type="primary" @click="look(item)"
                  >查看</el-button
                >
              </div>
            </div>

            <div class="btns">
              <el-button
                plain
                type="primary"
                style="width: 100px"
                @click="examInfo(item)"
                v-if="item.userId"
                >考试成绩</el-button
              >
              <el-button plain type="primary" @click="training(item)"
                >培训</el-button
              >
              <el-button plain type="success" @click="handleUpdate(item)"
                >修改</el-button
              >
              <el-button plain type="danger" @click="handleDelete(item)"
                >删除</el-button
              >
            </div>
          </el-card>
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.currentPage"
          :page-sizes="[6]"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改企业职工基本信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
      <div style="height: 50vh; overflow-y: scroll">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-divider>基础信息</el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生年月" prop="birthday">
                <el-date-picker
                  clearable
                  v-model="form.birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择出生年月"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择性别">
                  <el-option label="男" :value="0"> </el-option>
                  <el-option label="女" :value="1"> </el-option>
                  <!-- <el-option label="未知" :value="2"> </el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证号" prop="idCard">
                <el-input
                  v-model="form.idCard"
                  placeholder="请输入身份证号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="家庭电话" prop="homeTel">
                <el-input v-model="form.homeTel" placeholder="请输入家庭电话" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="家庭地址" prop="homeAddress">
                <el-input
                  v-model="form.homeAddress"
                  placeholder="请输入家庭地址"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="毕业院校" prop="school">
                <el-input v-model="form.school" placeholder="请输入毕业院校" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业" prop="speciality">
                <el-input v-model="form.speciality" placeholder="请输入专业" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="籍贯" prop="nativePlace">
                <el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="学历" prop="education">
                <el-select v-model="form.education" placeholder="请选择是学历">
                  <el-option label="小学" :value="1"> </el-option>
                  <el-option label="初中" :value="2"> </el-option>
                  <el-option label="中专" :value="3"> </el-option>
                  <el-option label="高中" :value="4"> </el-option>
                  <el-option label="大专" :value="5"> </el-option>
                  <el-option label="本科" :value="6"> </el-option>
                  <el-option label="研究生" :value="7"> </el-option>
                  <el-option label="博士" :value="8"> </el-option>
                  <el-option label="硕士" :value="9"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="人员类型" prop="peopleType" v-if="typeShow">
                <el-select
                  v-model="form.peopleType"
                  placeholder="请选择人员类型"
                >
                  <el-option
                    v-for="item in peperSelect"
                    :key="item.id"
                    :label="item.peopleTypeName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="照片" prop="photo">
                <ImageUpload
                  v-model="form.photo"
                  @input="upImage"
                  :limit="20"
                ></ImageUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>特殊证件</el-divider>
          <el-button
            v-if="form.specialWorkerInfoList.length == 0"
            type="primary"
            @click="addItem(form.specialWorkerInfoList.length)"
          >
            新增特殊工种证件
          </el-button>
          <el-row>
            <el-col :span="24">
              <div
                v-for="(item, index) in form.specialWorkerInfoList"
                :key="index"
                style="height: 51px"
              >
                <el-row>
                  <el-col :span="5"
                    ><el-form-item
                      label="工种类型"
                      class="form-style"
                      label-width="70px"
                    >
                      <el-select
                        v-model="item.certificateType"
                        filterable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in NameList"
                          :key="item.id"
                          :label="item.certificateName"
                          :value="item.id"
                        >
                        </el-option>
                        <el-option label="其他" value="0"></el-option>
                      </el-select> </el-form-item
                  ></el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="颁发机关"
                      class="form-style"
                      label-width="70px"
                    >
                      <el-input
                        v-model="item.issueOrgan"
                        size="small"
                        class="special-style"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="复审情况"
                      class="form-style"
                      label-width="70px"
                    >
                      <el-input
                        v-model="item.reviewSituation"
                        size="small"
                        class="special-style"
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="7">
                    <el-form-item
                      label="复检时间"
                      class="form-style"
                      label-width="70px"
                    >
                      <el-date-picker
                        style="width: 190px"
                        clearable
                        v-model="item.recheckDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker> </el-form-item
                  ></el-col>
                </el-row>
                <el-row>
                  <el-col :span="7">
                    <el-form-item
                      label="颁发日期"
                      class="form-style"
                      label-width="70px"
                    >
                      <el-date-picker
                        clearable
                        style="width: 190px"
                        v-model="item.issueDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker> </el-form-item
                  ></el-col>
                  <el-col :span="7">
                    <el-form-item
                      label="操作证有效期"
                      class="form-style"
                      label-width="100px"
                    >
                      <el-date-picker
                        clearable
                        style="width: 190px"
                        v-model="item.validity"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker> </el-form-item
                  ></el-col>

                  <el-col :span="6">
                    <el-form-item
                      label="证件文件"
                      class="form-style"
                      label-width="100px"
                    >
                      <div @click="photpUpload(index)">
                        <!-- <ImageUpload
                          v-model="item.remark"
                          @input="upImage2"
                          :limit="1"
                          :isShowTip="false"
                        ></ImageUpload> -->
                        <FileUpload
                          v-model="item.remark"
                          @input="upImage2"
                          :limit="5"
                          :isShowTip="false"
                        ></FileUpload>
                      </div> </el-form-item
                  ></el-col>
                  <el-col :span="4">
                    <el-form-item label-width="10px">
                      <el-button
                        v-if="index + 1 == form.specialWorkerInfoList.length"
                        type="primary"
                        size="mini"
                        @click="addItem(form.specialWorkerInfoList.length)"
                        >+</el-button
                      >
                      <el-button
                        type="warning"
                        size="mini"
                        @click="deleteItem(item, index)"
                        >-</el-button
                      >
                      <el-button
                        v-if="title == '修改企业职工基本信息'"
                        type="danger"
                        size="mini"
                        @click="deletePhoto(item)"
                        >×</el-button
                      >
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-divider>工作信息</el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="现任岗位" prop="post">
                <el-input v-model="form.post" placeholder="请输入现任岗位" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工种" prop="certificateType">
                <el-select
                  v-model="form.certificateType"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in NameList"
                    :key="item.id"
                    :label="item.certificateName"
                    :value="item.id"
                  >
                  </el-option>
                  <el-option label="其他" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工号" prop="workerNo">
                <el-input v-model="form.workerNo" placeholder="请输入工号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="入职时间" prop="entryDate">
                <el-date-picker
                  clearable
                  v-model="form.entryDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择入职时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="离职时间" prop="leaveDate">
                <el-date-picker
                  clearable
                  v-model="form.leaveDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择离职时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工龄(年)" prop="workYears">
                <el-input
                  v-model="form.workYears"
                  placeholder="请输入工作年限"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="证书编号" prop="certificateNo">
                <el-input
                  v-model="form.certificateNo"
                  placeholder="请输入证书编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="颁发机关" prop="issueOrgan">
                <el-input
                  v-model="form.issueOrgan"
                  placeholder="请输入颁发机关"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="颁发日期" prop="issueDate">
                <el-date-picker
                  clearable
                  v-model="form.issueDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择颁发日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="操作证有效期" prop="validity">
                <el-date-picker
                  clearable
                  v-model="form.validity"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择操作证有效期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="复审时间" prop="reviewDate">
                <el-date-picker
                  clearable
                  v-model="form.reviewDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择复审时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="复审情况" prop="reviewSituation">
                <el-input
                  v-model="form.reviewSituation"
                  placeholder="请输入复审情况"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="情况说明" prop="remark">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  placeholder="请输入情况说明"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>培训信息</el-divider>

          <el-row>
            <el-col :span="8">
              <el-form-item label="是否培训" prop="isTrain" label-width="250">
                <el-select v-model="form.isTrain" placeholder="请选择是否有效">
                  <el-option label="是" value="1"> </el-option>
                  <el-option label="否" value="2"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="三级教育情况" prop="educationInfo">
                <el-input
                  v-model="form.educationInfo"
                  placeholder="请输入三级教育情况"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否接受安全教育" prop="isSecurityTrain">
                <el-select
                  v-model="form.isSecurityTrain"
                  placeholder="请选择是否有效"
                >
                  <el-option label="是" value="1"> </el-option>
                  <el-option label="否" value="2"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>投保信息</el-divider>

          <el-row>
            <el-col :span="8">
              <el-form-item label="投保额度(万元)" prop="insuredAmount">
                <el-input
                  v-model="form.insuredAmount"
                  placeholder="请输入投保额度"
                />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="投保期限" prop="expires">
                <el-date-picker
                  clearable
                  v-model="form.expires"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择投保期限"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增工种 -->
    <el-dialog title="新增工种" :visible.sync="addWork" width="20%">
      <el-input v-model="workType" placeholder="请输入工种" clearable />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="workSubmit">确 定</el-button>
        <el-button @click="addWork = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 详情表格 -->
    <el-dialog
      title="用户信息"
      :visible.sync="openLook"
      width="42%"
      append-to-body
    >
      <el-row>
        <el-col :span="5">
          <el-image
            style="width: 144px; height: 170px"
            :src="userInfo.photo || photoImg"
          ></el-image>
        </el-col>
        <el-col :span="19">
          <el-descriptions title="基础信息">
            <el-descriptions-item label="姓名">{{
              userInfo.name
            }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{
              userInfo.sex == 0 ? "男" : "女"
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              userInfo.homeTel
            }}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{
              userInfo.homeAddress
            }}</el-descriptions-item>
            <el-descriptions-item label="籍贯">{{
              userInfo.nativeplace
            }}</el-descriptions-item>
            <el-descriptions-item label="身份证">{{
              userInfo.idCard
            }}</el-descriptions-item>
            <el-descriptions-item label="出身年月">{{
              userInfo.birthday
            }}</el-descriptions-item>
            <el-descriptions-item label="学历">{{
              edueInfo[userInfo.education]
            }}</el-descriptions-item>
            <el-descriptions-item label="毕业院校">{{
              userInfo.school
            }}</el-descriptions-item>
            <el-descriptions-item label="专业">{{
              userInfo.speciality
            }}</el-descriptions-item>
            <el-descriptions-item label="家庭电话">{{
              userInfo.homeTel
            }}</el-descriptions-item>
            <el-descriptions-item label="家庭地址">{{
              userInfo.homeAddress
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-descriptions title="工作信息">
        <el-descriptions-item label="部门">{{
          userInfo.deptName
        }}</el-descriptions-item>
        <el-descriptions-item label="现任岗位">{{
          userInfo.certificateName
        }}</el-descriptions-item>
        <el-descriptions-item label="工号">{{
          userInfo.workerNo
        }}</el-descriptions-item>
        <el-descriptions-item label="入职时间">{{
          userInfo.entryDate
        }}</el-descriptions-item>
        <el-descriptions-item label="工作年限">{{
          userInfo.workYears + "年"
        }}</el-descriptions-item>
        <el-descriptions-item label="离职时间">{{
          userInfo.leaveDate
        }}</el-descriptions-item>
        <el-descriptions-item label="复审时间">{{
          userInfo.reviewDate
        }}</el-descriptions-item>
        <el-descriptions-item label="复审情况">{{
          userInfo.reviewSituation
        }}</el-descriptions-item>
        <el-descriptions-item label="情况说明">{{
          userInfo.remark
        }}</el-descriptions-item>
        <el-descriptions-item label="证书编号">{{
          userInfo.certificateNo
        }}</el-descriptions-item>
        <el-descriptions-item label="颁发机关">{{
          userInfo.issueOrgan
        }}</el-descriptions-item>
        <el-descriptions-item label="颁发日期">{{
          userInfo.issueDate
        }}</el-descriptions-item>
        <el-descriptions-item label="操作证有效期">{{
          userInfo.validity
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="证件信息">
        <el-descriptions-item label="投保额度">
          <template slot="label">
            <div
              class="photos"
              v-for="item in userInfo.specialWorkerInfoList"
              :key="item.id"
              style="margin-right: 15px"
            >
           {{ item.certificateName+'证:'}}
              <!-- <image-preview :src="item.remark" :width="100" :height="60" /> -->
              <el-button
                  v-if="gettp(item.remark) == 1"
                  size="mini"
                  type="primary"
                  @click="look2(item.remark)"
                  >查看</el-button
                >
                <el-button
                  v-if="gettp(item.remark) == 2"
                  size="mini"
                  type="primary"
                  @click="download(item.remark)"
                  >下载</el-button
                >
              <!-- <img :src="item.remark" alt=""> -->
            </div>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="培训信息">
        <el-descriptions-item label="是否培训">{{
          userInfo.isTrain == 1 ? "是" : "否"
        }}</el-descriptions-item>
        <el-descriptions-item label="三级教育情况">{{
          userInfo.educationlnfo
        }}</el-descriptions-item>
        <el-descriptions-item label="是否接收安全教育">{{
          userInfo.isSecurityTrain == 1 ? "是" : "否"
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="保险信息">
        <el-descriptions-item label="投保额度">{{
          userInfo.insuredAmount + "万元"
        }}</el-descriptions-item>
        <el-descriptions-item label="投保期限">{{
          userInfo.expires
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- 考试信息 -->
    <el-dialog
      title="考试信息"
      :visible.sync="examInfoDlg"
      width="42%"
      append-to-body
    >
      <el-table :data="examTable" style="width: 100%">
        <el-table-column prop="title" label="考试名称" width="180">
        </el-table-column>
        <el-table-column prop="tryCount" label="考试次数" width="180">
        </el-table-column>
        <el-table-column prop="maxScore" label="最高分数"> </el-table-column>
        <el-table-column prop="passed" label="是否通过">
          <template slot-scope="scope">
            <el-tag :type="scope.row.passed ? 'success' : 'danger'">{{
              scope.row.passed ? "通过" : "未通过"
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="培训信息"
      :visible.sync="trainShow"
      width="42%"
      append-to-body
    >
      <el-table :data="trainList" style="width: 100%">
        <el-table-column prop="title" label="培训名称"> </el-table-column>
        <el-table-column prop="isRead" label="培训情况">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isRead ? 'success' : 'danger'">{{
              scope.row.isRead ? "已培训" : "未培训"
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <preview-content v-if="showType" :previewMsg="previewMsg"></preview-content>
  </div>
</template>
  
<script>
import {
  listEmployee,
  getEmployee,
  delEmployee,
  addEmployee,
  updateEmployee,
  userList,
  certificateNameList,
  deptList,
  postList,
  profile,
  getTest,
  examMember,
  getPeopleTypeList,
  addCertificateName,
  delinfo,
  listTrainuser,
} from "@/api/system/employee.js";
import PreviewContent from "@/components/PreviewContent/PreviewContent.vue";

import { deptTreeSelect } from "@/api/system/user";
import user from "@/assets/images/user.png";
import cache from "@/plugins/cache";
export default {
  name: "Employee",
  components: {
    PreviewContent,
  },
  data() {
    return {
      showType: true,
      previewMsg: {
        dialogTableVisible: false,
        fileType: "",
        iframeUrl: "",
      },
      specialWorkerIndex: 0,
      addWork: false,
      workType: "",
      photoImg: require("../../../assets/images/user.png"),
      user: user,
      openLook: false,
      peperSelect: [],
      typeShow: false,
      edueInfo: {
        1: "小学",
        2: "初中",
        3: "中专",
        4: "高中",
        5: "大专",
        6: "本科",
        7: "研究",
        8: "博士",
        9: "硕士",
      },
      userInfo: {
        birthday: null,
        cardNo: null,
        certificateName: null,
        certificateNo: null,
        certificateType: null,
        createBy: null,
        createTime: null,
        deptId: null,
        deptName: null,
        education: null,
        educationInfo: null,
        entryDate: null,
        expires: null,
        gender: null,
        homeAddress: null,
        homeTel: null,
        id: null,
        idCard: null,
        insuredAmount: null,
        isCommercialInsurance: null,
        isEmpInjuryInsurance: null,
        isSecurityTrain: null,
        isSpecialWorker: null,
        isTrain: null,
        issueDate: null,
        issueOrgan: null,
        leaveDate: null,
        mineId: null,
        name: null,
        nativePlace: null,
        nickName: null,
        orgId: null,
        peopleType: null,
        peopleTypeName: null,
        photo: null,
        post: null,
        postId: null,
        postName: null,
        remark: null,
        reviewDate: null,
        reviewSituation: null,
        school: null,
        sex: null,
        speciality: null,
        updateBy: null,
        updateTime: null,
        userId: null,
        validity: null,
        workYears: null,
        workerNo: null,
      },
      options: [],
      examInfoDlg: false,
      examTable: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业职工基本信息表格数据
      employeeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 人员类型(关联peopleType人员类型表)时间范围
      daterangeBirthday: [],
      // 人员类型(关联peopleType人员类型表)时间范围
      daterangeEntryDate: [],
      // 人员类型(关联peopleType人员类型表)时间范围
      daterangeLeaveDate: [],
      // 人员类型(关联peopleType人员类型表)时间范围
      daterangeReviewDate: [],
      // 人员类型(关联peopleType人员类型表)时间范围
      daterangeIssueDate: [],
      // 人员类型(关联peopleType人员类型表)时间范围
      daterangeValidity: [],
      // 查询参数
      queryParams: {
        currentPage: 1,
        pageSize: 6,
        peopleType: null,
        name: null,
        sex: null,
        birthday: null,
        nativePlace: null,
        education: null,
        educationInfo: null,
        workYears: null,
        post: null,
        idCard: null,
        isEmpInjuryInsurance: null,
        isCommercialInsurance: null,
        insuredAmount: null,
        expires: null,
        mineId: null,
        orgId: null,
        workerNo: null,
        cardNo: null,
        homeTel: null,
        homeAddress: null,
        entryDate: null,
        leaveDate: null,
        postId: null,
        isTrain: null,
        isSecurityTrain: null,
        speciality: null,
        school: null,
        reviewDate: null,
        reviewSituation: null,
        certificateType: null,
        certificateNo: null,
        issueOrgan: null,
        issueDate: null,
        validity: null,
        isSpecialWorker: null,
        userId: null,
      },
      // 表单参数
      form: {
        peopleType: null,
        specialWorkerInfoList: [],
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
        post: [
          { required: true, message: "现任岗位不能为空", trigger: "blur" },
        ],
      },
      NameList: [],
      deptList: [],
      postList: [],
      trainList: [],
      trainShow: false,
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 部门名称
      deptName: undefined,
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    let obj = cache.session.getJSON("route");
    console.log(obj);
    this.form.peopleType = obj.typeId;
    this.queryParams.peopleType = obj.typeId;
    this.getList();
    this.userList();
    this.deptLists();
    this.certificateNameLists();
    this.postLists();
    this.getDeptTree();
  },
  methods: {
    getUserImg(img) {
      if (img) {
        const index = img.indexOf(",");
        let result;
        if (index !== -1) {
          result = img.substring(0, index);
        } else {
          result = img; // 如果字符串中没有逗号，直接返回整个字符串
        }
        return result;
      } else {
        return this.photoImg;
      }
    },
    photpUpload(index) {
      // console.log(item);
      this.specialWorkerIndex = index;
    },
    look(e) {
      console.log(e);
      this.openLook = true;

      this.userInfo = e;
    },
    addItem(length) {
      if (length >= 10) {
        this.$message({
          type: "warning",
          message: "最多可新增10条!",
        });
      } else {
        this.form.specialWorkerInfoList.push({
          certificateType: null, //工种类型
          issueOrgan: null, //颁发机关
          issueDate: null, //颁发日期yyyy-MM-dd
          validity: null, //操作证有效期yyyy-MM-dd
          reviewSituation: null, //复审情况
          recheckDate: null, //复检时间yyyy-MM-dd
          remark: null,
        });
      }
    },
    //表单删除方法
    deleteItem(item, index) {
      this.form.specialWorkerInfoList.splice(index, 1);
    },
    //删除证件
    deletePhoto(item) {
      this.$confirm("确认删除此证件？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delinfo(item.id).then((res) => {
            console.log(res);
            this.$modal.msgSuccess("删除证件成功");
            this.form.specialWorkerInfoList =
              this.form.specialWorkerInfoList.filter(
                (obj) => obj.id !== item.id
              );
            this.handleQuery();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    upImage2(e) {
      this.form.specialWorkerInfoList[this.specialWorkerIndex].remark = e;
    },

    // 培训
    training(row) {
      console.log(row);
      listTrainuser({ userId: row.userId }).then((res) => {
        console.log(res);
        this.trainList = res.rows;
        this.trainShow = true;
      });
    },
    examInfo(row) {
      this.examInfoDlg = true;
      console.log(row.userId);

      examMember({ memberId: row.userId }).then((res) => {
        console.log(res.data.list);
        this.examTable = res.data.list;
        // console.log(res);
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    //查询部门
    deptLists() {
      deptList({}).then((res) => {
        this.deptList = res.data;
      });
    },
    // 查询岗位
    postLists() {
      postList({}).then((res) => {
        this.postList = res.rows;
      });
    },
    certificateNameLists() {
      certificateNameList({ currentPage: 1, pageSize: 999 }).then((res) => {
        this.NameList = res.rows;
      });
    },
    upImage(e) {
      this.form.photo = e;
    },
    /** 查询企业职工基本信息列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeBirthday && "" != this.daterangeBirthday) {
        this.queryParams.params["beginBirthday"] = this.daterangeBirthday[0];
        this.queryParams.params["endBirthday"] = this.daterangeBirthday[1];
      }
      if (null != this.daterangeEntryDate && "" != this.daterangeEntryDate) {
        this.queryParams.params["beginEntryDate"] = this.daterangeEntryDate[0];
        this.queryParams.params["endEntryDate"] = this.daterangeEntryDate[1];
      }
      if (null != this.daterangeLeaveDate && "" != this.daterangeLeaveDate) {
        this.queryParams.params["beginLeaveDate"] = this.daterangeLeaveDate[0];
        this.queryParams.params["endLeaveDate"] = this.daterangeLeaveDate[1];
      }
      if (null != this.daterangeReviewDate && "" != this.daterangeReviewDate) {
        this.queryParams.params["beginReviewDate"] =
          this.daterangeReviewDate[0];
        this.queryParams.params["endReviewDate"] = this.daterangeReviewDate[1];
      }
      if (null != this.daterangeIssueDate && "" != this.daterangeIssueDate) {
        this.queryParams.params["beginIssueDate"] = this.daterangeIssueDate[0];
        this.queryParams.params["endIssueDate"] = this.daterangeIssueDate[1];
      }
      if (null != this.daterangeValidity && "" != this.daterangeValidity) {
        this.queryParams.params["beginValidity"] = this.daterangeValidity[0];
        this.queryParams.params["endValidity"] = this.daterangeValidity[1];
      }
      console.log(this.form.peopleType);
      this.queryParams.peopleType = this.form.peopleType;

      listEmployee(this.queryParams).then((response) => {
        this.employeeList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    userList() {
      //userList({ currentPage: 1, pageSize: 10 }).then((res) => {
      //  console.log(res);
      //  this.options = res.rows;
      //});
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        sex: null,
        birthday: null,
        nativePlace: null,
        education: null,
        educationInfo: null,
        workYears: null,
        post: null,
        idCard: null,
        isEmpInjuryInsurance: null,
        isCommercialInsurance: null,
        insuredAmount: null,
        expires: null,
        remark: null,
        mineId: null,
        orgId: null,
        workerNo: null,
        cardNo: null,
        homeTel: null,
        homeAddress: null,
        entryDate: null,
        leaveDate: null,
        postId: null,
        isTrain: null,
        isSecurityTrain: null,
        speciality: null,
        school: null,
        reviewDate: null,
        reviewSituation: null,
        certificateType: null,
        certificateNo: null,
        issueOrgan: null,
        issueDate: null,
        validity: null,
        isSpecialWorker: null,
        photo: null,
        userId: null,
        peopleType: this.queryParams.peopleType,
        specialWorkerInfoList: [
          // {
          //   certificateType: null, //工种类型
          //   issueOrgan: null, //颁发机关
          //   issueDate: null, //颁发日期yyyy-MM-dd
          //   validity: null, //操作证有效期yyyy-MM-dd
          //   reviewSituation: null, //复审情况
          //   recheckDate: null, //复检时间yyyy-MM-dd
          //   remark: null,
          // },
        ],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeBirthday = [];
      this.daterangeEntryDate = [];
      this.daterangeLeaveDate = [];
      this.daterangeReviewDate = [];
      this.daterangeIssueDate = [];
      this.daterangeValidity = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.typeShow = false;
      this.open = true;
      this.title = "添加企业职工基本信息";
    },
    // 新增工种
    addwork() {
      this.addWork = true;
    },
    workSubmit() {
      if (this.workType != "") {
        addCertificateName({ certificateName: this.workType }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message("新增成功");
          }
          this.addWork = false;
          this.certificateNameLists();
        });
      }
    },
    download(value) {
      if (value.indexOf(",") >= 0) {
        let split = value.split(",");
        for (var i = 0; i < split.length; i++) {
          if (split[i] != "") {
            let num = split[i].lastIndexOf(".");
            let dis = split[i].substring(num + 1, num + 4);

            if (dis == "pdf" || dis == "PDF") {
              downloadFile(split[i], "a");
            } else {
              downloadFile(split[i], "iframe");
            }
          }
        }
      } else {
        let num = value.lastIndexOf(".");
        let dis = value.substring(num + 1, num + 4);
        if (dis == "pdf" || dis == "PDF") {
          downloadFile(value, "a");
        } else {
          downloadFile(value, "iframe");
        }
      }
    },
    gettp(v) {
      let type = null;
      if (v.includes(",")) {
        let list = v.split(",");
        list.forEach((item) => {
          type = this.getFileType(item);
        });
      } else {
        type = this.getFileType(v);
      }
      if (type == "pdf" || type == "txt") {
        return 1;
      } else {
        return 2;
      }
    },
    getFileType(url) {
      let pdfReg = /^.+(\.pdf)$/;
      let txtReg = /^.+(\.txt)$/;
      let wordReg = /^.+(\.doc|\.docx)$/;
      let excelReg = /^.+(\.xls|\.xlsx)$/;
      let jpgReg = /^.+(\.png|\.jpg|\.jpeg|\.bmp)$/;
      if (pdfReg.test(url)) {
        return "pdf";
      }
      if (txtReg.test(url)) {
        return "txt";
      }
      if (wordReg.test(url)) {
        return "word";
      }
      if (excelReg.test(url)) {
        return "excel";
      }
      if (jpgReg.test(url)) {
        return "picture";
      }
    },
    look2(v) {
      this.showType = false;
      this.$nextTick(() => {
        this.showType = true;
      });
      let list = v.split(",");
      this.previewMsg.dialogTableVisible = true;
      this.previewMsg.iframeUrl = list[0];
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      this.typeShow = true;
      //   console.log(row);
      // this.reset();
      // const id = row.id || this.ids;
      // getEmployee(id).then((response) => {

      //   // console.log(response,'resssssssssssss');
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改企业职工基本信息";
      // });

      await getPeopleTypeList().then((res) => {
        console.log(res);
        this.peperSelect = res.rows;
      });

      this.form = {
        ...row,
        isTrain: row.isTrain.toString(),
        isSecurityTrain: row.isSecurityTrain.toString(),
      };
      // this.form = row
      console.log(this.form);
      this.open = true;
      this.title = "修改企业职工基本信息";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateEmployee(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addEmployee(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除企业职工基本信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delEmployee(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "app/employee/export",
        {
          ...this.queryParams,
        },
        `employee_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  width: 70%;
  height: 50px;
  text-align: center;
  /* 文字在单元格中居中 */
}

.employ_table {
  width: 100%;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 10px;

  .employ_block {
    min-width: 150px;
    min-height: 300px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;

    .employ_img {
      width: 100%;
      height: 50%;
      border-radius: 10px;
    }

    .employ_title {
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: column;
      padding-top: 10px;
      gap: 10px;

      span {
        display: block;
      }
    }
  }
}

.userList {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 32%);
  grid-gap: 18px;

  .cardItem {
    box-sizing: border-box;
    position: relative;
    height: 240px;

    .cardMain {
      display: flex;
      position: relative;

      .top_right {
        position: absolute;
        right: 10px;
        top: 10px;
      }

      .text {
        margin-left: 20px;
        .gangwei {
          width: 250px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .name {
          font-size: 20px;
          color: #000;
        }

        p {
          line-height: 16px;
          font-size: 16px;
          color: #687487;
        }
      }
    }

    .btns {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
::v-deep(.el-dialog__body) {
  padding: 22px 10px;
}
</style>
  